<template>
	<view class="multiple-root">
		<view class="multiple-mask" v-show="isShow" @click="setShow"></view>
		<view class="multiple-select">
			<view class="tags">
				<view class="item"
						v-for="(item, index) in selectActive" 
						:key="index" >
						<text>{{ selectList[item].label }}</text>
						<text class="dels" @click="delItem(item)"></text>
				</view>
			</view>
			<view class="input">
				<input type="text" placeholder="请选择" :value="selectLabel.join(', ')" @click="setShow" disabled/>
				<!-- <view class="list" v-show="isShow">
					<view class="search">
						<input type="text" placeholder="搜索" @input="soItem"/>
					</view>
					<view class="btns">
						<view class="all" @click="allSelect">全选</view>
						<view class="un" @click="unSelect">取消全选</view>
					</view>
					<view class="scroll">
						<view class="item" 
						:class="{active: selectActive.indexOf(index) >= 0}" 
						v-for="(item, index) in selectList" 
						:key="index" 
						@click="itemClick(index)"
						v-if="hiddenList.indexOf(index) == -1">
							<text>{{ item.label }}</text>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"MultipleSelect",
		props: ['selectList', 'selectData','selectActive'],
		watch: {
				selectActive:{
					handler(newVal) {
						this.selectLabel = [];
						this.selectValue = [];
						newVal.forEach(item => {
							let itemData = this.selectList[item];
							this.selectLabel.push(itemData.label);
							this.selectValue.push(itemData.value);
						})
						this.$emit('change', this.selectValue, newVal)
					},
					deep: true
				},
				selectData:{
					handler(newVal) {
						this.selectList.forEach((item, index) => {
							if(newVal.indexOf(item.value) >= 0){
								this.selectActive.push(index);
							}
						})
						console.log('selectData', this.selectList, newVal)
					},
					deep: true
				}
		},
		data() {
			return {
				selectActive: [],
				selectLabel: [],
				selectValue: [],
				hiddenList: [],
				isShow: false
			};
		},
		created(){
			if(this.selectData){
				this.selectList.forEach((item, index) => {
					if(this.selectData.indexOf(item.value) >= 0){
						this.selectActive.push(index);
					}
				})
			}
		},
		methods: {
			itemClick(index){
				let idx = this.selectActive.indexOf(index)
				if(idx >= 0){
					this.selectActive.splice(idx, 1);
				}else{
					this.selectActive.push(index);
				}
			},
			allSelect(){
				this.selectActive = this.selectList.map((i, s) => s);
			},
			unSelect(){
				this.selectActive = [];
			},
			delItem(e){
				this.selectActive = this.selectActive.filter(i => i !== e)
				this.$emit('del', this.selectList[e].value)
			},
			soItem(e){
				let value = e.detail.value;
				this.hiddenList = [];
				this.selectList.forEach((item, index) => {
					let idx = item.label.indexOf(value);
					if(idx == -1){
						this.hiddenList.push(index);
					}
				});
				this.$forceUpdate();
				console.log(e, this.hiddenList)
			},
			setShow(){
				this.isShow = !this.isShow;
			}
		}
	}
</script>

<style lang="scss">
	.multiple-root{
		width: 100%;
	}
	.multiple-mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
	}
	.multiple-select{
		position: relative;
		width: 200px;
		// padding: 20rpx;
		// border: 1px solid #ddd;
		box-sizing: border-box;
		border-radius: 6rpx;
		font-size: 26rpx;
		color: #333;
		background: #fff;
		z-index: 999;
		.tags{
			display: flex;
			flex-wrap: wrap;
			.item{
				position: relative;
				background: rgb(228,234,236);
				border-radius: 6rpx;
				padding: 12rpx 40rpx 12rpx 26rpx;
				margin: 0 16rpx 16rpx 0;
				.dels{
					position: absolute;
					top: 0;
					right: 0;
					width: 40rpx;
					height: 102%;
					background: url() no-repeat center left / 28rpx;
				}
			}
		}
		.input{
			// position: relative;
			>input{
				border: 1px solid #ddd;
				border-radius: 6rpx;
				height: 60rpx;
				padding: 0 20rpx;
			}
			&::after{
				content: ' ';
				position: absolute;
				top: 0;
				right: 0;
				width: 60rpx;
				height: 60rpx;
				background: url() no-repeat center / 20rpx;
			}
			.list{
				position: absolute;
				width: 100%;
				top: 70rpx;
				right: 0;
				border: 1px solid #ddd;
				border-radius: 6rpx;
				box-sizing: border-box;
				background: #fff;
				padding: 10rpx 10rpx 16rpx 10rpx;
				margin-bottom: 20rpx;
				.search{
					input{
						border: 1px solid #ddd;
						border-radius: 6rpx;
						height: 50rpx;
						padding: 0 20rpx;
						&:focus{
							border-color: #55aaff;
						}
					}
				}
				.btns{
					display: flex;
					border: 1px solid #ddd;
					border-radius: 6rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					>view{
						flex: 1;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						background: rgb(243,245,246);
						&.all{
							background: rgb(248,249,250);
							border-right: 1px solid #ddd;
						}
					}
				}
				.scroll{
					width: 100%;
					max-height: 400rpx;
					overflow-x: hidden;
					overflow-y: auto;
					.item{
						display: block;
						line-height: 60rpx;
						padding: 0 50rpx 0 20rpx;
						margin-right: 20rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						&.active{
							background: url() no-repeat center right / 32rpx;
						}
					}
				}
			}
		}
	}
</style>